<template>
    <!-- 机构人员管理 -->
    <div class="header_information page-container">
      <!-- 头部 -->
      <el-row class="header_name">
        <el-col :span="24" class="header_text">
          <h1>人员管理</h1>
        </el-col>
        <el-col :span="24">
          <div class="header_line"></div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="content">
          <el-tabs v-model="activeName" type="card" class="demo-tabs">
            <el-tab-pane label="参赛选手管理" name="first">
              <participmanagement ref="participmanagementref" />
            </el-tab-pane>
            <el-tab-pane label="参赛选手录入" name="second">
              <entrycontestants />
            </el-tab-pane>
            <el-tab-pane label="指导老师管理" name="third">
              <instructorment />
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup>
  import { nextTick, ref } from "vue";
  import participmanagement from "./tabs/participmanagement.vue";
  import entrycontestants from "./tabs/entrycontestants.vue";
  import instructorment from './tabs/instructorment.vue';
  
  const participmanagementref = ref();
  // tabs
  const activeName = ref("first");
  
  const handleToParticipmanagement = () => {
    activeName.value = "first";
    nextTick(() => {
      participmanagementref.value.handleLoad(true);
    });
  };
  </script>
  
  <style lang="scss" scoped>
  .header_information {
    padding: 20px;
  
    .header_name {
      margin-left: 10px;
      margin-right: 10px;
  
      .header_text {
        margin-left: -10px;
        margin-right: -10px;
      }
  
      h1 {
        font-size: 28px;
      }
  
      // 线
      .header_line {
        display: block;
        height: 1px;
        width: 100%;
        margin: 24px 0 20px 0;
        background-color: #8473f717;
      }
    }
  
    //   内容
    :deep(.table_btn_success) {
      padding: 0 5px !important;
      border: none;
    }
  
    :deep(.el-table) .cell {
      padding: 0 10px;
    }
  
    .el_row_btn {
      margin-bottom: 20px;
  
      .content {
        .content_top_btn {
          display: flex;
          justify-content: space-between;
  
          :deep(.tob_tabs) {
            span {
              font-size: 14px !important;
            }
          }
  
          .top_search_inp {
            width: 300px;
            height: 40px;
            margin-right: 5px;
          }
  
          .top_search_btn {
            width: 110px;
            margin-right: 5px;
          }
        }
      }
    }
  
    .el_dropdown_link {
      font-size: 14px;
    }
  
    :deep(.el-table__cell) {
      padding: 12px 0 !important;
    }
  }
  </style>